<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="爱洞ID" prop="platformId">
        <el-input v-model="queryParams.platformId" placeholder="请输入爱洞ID" clearable
                  @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item label="手机号" prop="phone">
        <el-input v-model="queryParams.phone" placeholder="请输入手机号" clearable @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item label="用户昵称" prop="nickName">
        <el-input v-model="queryParams.nickName" placeholder="请输入用户昵称" clearable
                  @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item label="实名认证" prop="cardAuth">
        <el-select v-model="queryParams.cardAuth" placeholder="请选择" clearable>
          <el-option v-for="dict in dict.type.app_check_status" :key="dict.value" :label="dict.label"
                     :value="dict.value"/>
        </el-select>
      </el-form-item>
      <el-form-item label="真人认证" prop="videoAuth">
        <el-select v-model="queryParams.videoAuth" placeholder="请选择" clearable>
          <el-option v-for="dict in dict.type.app_check_status" :key="dict.value" :label="dict.label"
                     :value="dict.value"/>
        </el-select>
      </el-form-item>
      <el-form-item label="用户性别" prop="sex">
        <el-select v-model="queryParams.sex" placeholder="请选择" clearable>
          <el-option v-for="dict in dict.type.sys_user_sex" :key="dict.value" :label="dict.label" :value="dict.value"/>
        </el-select>
      </el-form-item>
      <el-form-item label="VIP" prop="vipFlag">
        <el-select v-model="queryParams.vipFlag" placeholder="请选择是否是VIP" clearable>
          <el-option v-for="dict in dict.type.sys_yes_no" :key="dict.value" :label="dict.label" :value="dict.value"/>
        </el-select>
      </el-form-item>

      <el-form-item label="账号状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="请选择账号状态" clearable>
          <el-option v-for="dict in dict.type.app_appuser_status" :key="dict.value" :label="dict.label"
                     :value="dict.value"/>
        </el-select>
      </el-form-item>
      <el-form-item label="在线状态" prop="onlineStatus">
        <el-select v-model="queryParams.onlineStatus" placeholder="请选择用户在线状态" clearable>
          <el-option v-for="dict in dict.type.app_online_status" :key="dict.value" :label="dict.label"
                     :value="dict.value"/>
        </el-select>
      </el-form-item>
      <el-form-item label="账号类型" prop="accountType">
        <el-select v-model="queryParams.accountType" placeholder="请选择账号类型" clearable>
          <el-option v-for="dict in dict.type.app_account_type" :key="dict.value" :label="dict.label"
                     :value="dict.value"/>
        </el-select>
      </el-form-item>
      <el-form-item label="渠道" prop="branch">
        <el-select v-model="queryParams.branch" placeholder="请选择渠道" clearable>
          <el-option v-for="dict in dict.type.sys_branch" :key="dict.value" :label="dict.label"
                     :value="dict.value"/>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>


    <el-table v-loading="loading" :data="appUserList">


      <el-table-column label="编号" type="expand" width="50">
        <template slot-scope="scope">
          <userInfo :userId="scope.row.id" :userName="scope.row.phone" :platformId="scope.row.platformId"></userInfo>
        </template>

      </el-table-column>

      <el-table-column label="爱洞ID" align="center" prop="platformId">
        <template slot-scope="scope">
          <span v-if="scope.row.sex === 1" style="color: #FF6EC7">{{ scope.row.platformId }}
          </span>
          <span v-else style="color: #7099F9">{{ scope.row.platformId }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="邀请人ID" align="center" prop="platformIdParent"/>
      <el-table-column label="渠道" align="center" prop="branch">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.sys_branch" :value="scope.row.branch"/>
        </template>
      </el-table-column>
      <el-table-column label="排序" align="center" prop="sort"/>
      <el-table-column label="金币余额" align="center" prop="goldBalance"/>
      <el-table-column label="钻石余额" align="center" prop="diamondBalance"/>

      <el-table-column label="手机号" align="center" prop="phone"/>
      <el-table-column label="性别" align="center" prop="sex">
        <template slot-scope="scope">
            <a v-if="scope.row.sex === 1" style="color: #FF6EC7" @click="changeSex(scope.row)">女
            </a>
            <a v-else style="color: #7099F9" @click="changeSex(scope.row)">男
            </a>
<!--          <dict-tag :options="dict.type.sys_user_sex" :value="scope.row.sex"/>-->
        </template>
      </el-table-column>
      <el-table-column label="等级" align="center" prop="level"/>
      <el-table-column label="账号类型" align="center" prop="accountType">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.app_account_type" :value="scope.row.accountType"/>
        </template>
      </el-table-column>

      <el-table-column label="实名认证" align="center" prop="cardAuth">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.app_check_status" :value="scope.row.cardAuth"/>
        </template>
      </el-table-column>
      <el-table-column label="真人认证" align="center" prop="videoAuth">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.app_check_status" :value="scope.row.videoAuth"/>
        </template>
      </el-table-column>
      <el-table-column label="账号状态" align="center" prop="status">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.app_appuser_status" :value="scope.row.status"/>
        </template>
      </el-table-column>
      <el-table-column label="在线状态" align="center" prop="onlineStatus">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.app_online_status" :value="scope.row.onlineStatus"/>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
        <template slot-scope="scope" v-if="scope.row.userId !== 1">
          <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)"
          >
            <el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="toSort" icon="el-icon-check"
                                v-hasPermi="['system:appUser:toSort']">设置排序
              </el-dropdown-item>
              <el-dropdown-item command="bindUser" icon="el-icon-check"
                                v-hasPermi="['system:appUser:bindUser']">绑定用户
              </el-dropdown-item>
              <el-dropdown-item command="bannedAccount" icon="el-icon-remove"
                                v-hasPermi="['system:appUser:bannedAccount']">封禁账号
              </el-dropdown-item>
              <el-dropdown-item command="releaseAccount" icon="el-icon-circle-check"
                                v-hasPermi="['system:appUser:releaseAccount']">解封账号
              </el-dropdown-item>
              <el-dropdown-item command="kickOnline" icon="el-icon-s-promotion"
                                v-hasPermi="['system:appUser:kickOnline']">强踢下线
              </el-dropdown-item>
              <el-dropdown-item command="setAccountType" icon="el-icon-s-promotion"
                                v-hasPermi="['system:appUser:setAccountType']">设置账号类型
              </el-dropdown-item>
              <el-dropdown-item command="addVip" icon="el-icon-s-promotion"
                                v-hasPermi="['system:appUser:addVip']">设置为会员
              </el-dropdown-item>
              <el-dropdown-item command="cancelAuth" icon="el-icon-error"
                                v-hasPermi="['system:appUser:cancelRealAuth']">取消真人认证
              </el-dropdown-item>
              <el-dropdown-item command="changePrice" icon="el-icon-mobile-phone"
                                v-hasPermi="['system:appUser:changePrice']">修改视频或通话价格
              </el-dropdown-item>
              <el-dropdown-item command="changePhone" icon="el-icon-mobile-phone"
                                v-hasPermi="['system:appUser:changePhone']">修改手机号码
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
                @pagination="getList"/>

    <!-- 设置排序 -->
    <el-dialog title="设置排序" :visible.sync="openSort" width="500px" append-to-body>

      <el-form :inline="true" :model="toSortBo" class="demo-form-inline">
        <el-form-item label="排序值">
          <el-input type="number" v-model="toSortBo.sort" placeholder="排序值"
                    style="width: 217px;"></el-input>
        </el-form-item>

      </el-form>


      <div slot="footer" class="dialog-footer">
        <el-button :loading="buttonLoading" type="primary" @click="toSort">确 定</el-button>
        <el-button @click="openSort = false">取 消</el-button>
      </div>

    </el-dialog>
    <!-- 绑定用户 -->
    <el-dialog title="绑定用户" :visible.sync="openBind" width="500px" append-to-body>

      <el-form :inline="true" :model="toBindAccountBo" class="demo-form-inline">
        <el-form-item label="爱洞ID">
          <el-input type="input" v-model="toBindAccountBo.platformId" placeholder="爱洞ID"
                    style="width: 217px;"></el-input>
        </el-form-item>

      </el-form>


      <div slot="footer" class="dialog-footer">
        <el-button :loading="buttonLoading" type="primary" @click="toBind">确 定</el-button>
        <el-button @click="openBind = false">取 消</el-button>
      </div>

    </el-dialog>


    <!-- 封禁账号 -->
    <el-dialog title="封禁账号" :visible.sync="openBanned" width="500px" append-to-body>

      <el-form :inline="true" :model="userBannedBo" class="demo-form-inline">


        <el-form-item label="封禁时间" prop="limitType">
          <el-select v-model="userBannedBo.limitType" placeholder="请选择封禁时间" clearable>
            <el-option v-for="dict in dict.type.limit_type" :key="dict.value" :label="dict.label" :value="dict.value"/>
          </el-select>
        </el-form-item>


        <el-form-item label="封禁原因">
          <el-input type="textarea" v-model="userBannedBo.reason" placeholder="封禁原因"
                    style="width: 217px;"></el-input>
        </el-form-item>

        <el-form-item label="备注信息">
          <el-input type="textarea" v-model="userBannedBo.remark" placeholder="请输入备注（仅在后台管理系统显示）"
                    style="width: 217px;"></el-input>
        </el-form-item>

      </el-form>


      <div slot="footer" class="dialog-footer">
        <el-button :loading="buttonLoading" type="primary" @click="toBanned">确 定</el-button>
        <el-button @click="openBanned = false">取 消</el-button>
      </div>

    </el-dialog>


    <!-- 设置用户角色 -->
    <el-dialog title="设置账号类型" :visible.sync="openAccountType" width="500px" append-to-body>

      <el-form :inline="true" :model="setAccountTypeBo" class="demo-form-inline">

        <el-form-item label="账号类型" prop="accountType">
          <el-select v-model="setAccountTypeBo.accountType" placeholder="请选择账号类型" clearable>
            <el-option v-for="dict in dict.type.app_account_type" :key="dict.value" :label="dict.label"
                       :value="dict.value"/>
          </el-select>
        </el-form-item>


      </el-form>


      <div slot="footer" class="dialog-footer">
        <el-button :loading="buttonLoading" type="primary" @click="toSetOpenAccountType">确 定</el-button>
        <el-button @click="openAccountType = false">取 消</el-button>
      </div>

    </el-dialog>

    <!-- 新增vip -->
    <el-dialog title="新增VIP" :visible.sync="openAddVip" width="500px" append-to-body>

      <el-form :inline="true" :model="addVipBo" class="demo-form-inline">

        <el-form-item label="VIP类型">
          <el-select v-model="addVipBo.vipType" placeholder="请选择VIP类型" clearable>
            <el-option v-for="dict in dict.type.app_vip_type" :key="dict.value" :label="dict.label"
                       :value="dict.value"/>
          </el-select>
        </el-form-item>

        <el-form-item label="新增天数" prop="expireTime">
          <el-input type="number" v-model="addVipBo.expireTime" placeholder="请输入新增天数" clearable>
          </el-input>
        </el-form-item>

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button :loading="buttonLoading" type="primary" @click="toAddVip">确 定</el-button>
        <el-button @click="openAddVip = false">取 消</el-button>
      </div>

    </el-dialog>

    <!-- 取消真人认证 -->
    <el-dialog title="取消真人认证" :visible.sync="openCancelRealAuth" width="500px" append-to-body>

      <el-form :inline="true" :model="cancelBo" class="demo-form-inline">

        <el-form-item label="取消原因">
          <el-input type="textarea" v-model="cancelBo.reason" placeholder="取消原因"
                    style="width: 217px;"></el-input>
        </el-form-item>

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button :loading="buttonLoading" type="primary" @click="toCancelRealAuth">确 定</el-button>
        <el-button @click="openCancelRealAuth = false">取 消</el-button>
      </div>

    </el-dialog>

    <!-- 修改用户的视频/语音价格 -->
    <el-dialog title="修改用户的视频/语音价格" :visible.sync="openChangePrice" width="500px" append-to-body>

      <el-form :inline="true" :model="changePriceBo" class="demo-form-inline">

        <el-form-item label="视频价格" prop="videoPrice">
          <el-input type="number" v-model="changePriceBo.videoPrice" placeholder="请输入视频价格" clearable>
          </el-input>
        </el-form-item>

        <el-form-item label="语音价格" prop="voicePrice">
          <el-input type="number" v-model="changePriceBo.voicePrice" placeholder="请输入语音价格" clearable>
          </el-input>
        </el-form-item>

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button :loading="buttonLoading" type="primary" @click="toChangePrice">确 定</el-button>
        <el-button @click="openChangePrice = false">取 消</el-button>
      </div>

    </el-dialog>

    <!-- 修改用户手机号码 -->
    <el-dialog title="修改用户手机号码" :visible.sync="openChangePhone" width="500px" append-to-body>

      <el-form :inline="true" :model="changePhoneBo" class="demo-form-inline">

        <el-form-item label="原手机号" prop="oldPhone">
          <el-input type="number" v-model="changePhoneBo.oldPhone" readonly>
          </el-input>
        </el-form-item>

        <el-form-item label="新手机号" prop="phone">
          <el-input type="number" v-model="changePhoneBo.phone" clearable>
          </el-input>
        </el-form-item>

        <el-form-item label="修改原因">
          <el-input type="textarea" v-model="changePhoneBo.reason" placeholder="修改原因"
                    style="width: 217px;"></el-input>
        </el-form-item>

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button :loading="buttonLoading" type="primary" @click="toChangePhone">确 定</el-button>
        <el-button @click="openChangePhone = false">取 消</el-button>
      </div>

    </el-dialog>

  </div>
</template>

<script>
import {
  addVip,
  bannedAccount,
  bindUser,
  cancelRealAuth, changePrice, changePhone,
  kickOnline,
  listAppUser,
  releaseAccount,
  setAccountType,
  toSort, updateAppUser, changeSex
} from "@/api/service/appUser/appUser";
import userInfo from "./userInfo.vue"

export default {
  name: "AppUser",
  dicts: ['app_check_status', 'sys_yes_no', 'app_appuser_status', 'sys_user_sex', 'app_online_status', 'app_account_type', 'limit_type', 'app_vip_type', 'sys_branch'],
  components: {
    userInfo
  },
  data() {
    return {
      openChangePhone: false,
      changePhoneBo:{
        id: "",
        platformId: "",
        oldPhone: "",
        phone: "",
        reason: ""
      },
      openChangePrice: false,
      changePriceBo:{
        id: "",
        videoPrice: "",
        voicePrice: ""
      },
      openCancelRealAuth:false,
      cancelBo:{
        id: "",
        reason: ""
      },
      toSortBo: {
        id: "",
        sort: ""
      },
      openSort: false,
      addVipBo: {
        id: ""
      },
      openAddVip: false,
      toBindAccountBo: {
        id: "",
        platformId: ""
      },
      setAccountTypeBo: {
        accountType: "",
        uid: ""
      },
      openBind: false,
      openAccountType: false,
      userBannedBo: {},
      openBanned: false,
      activeName: 'first',
      src: "/400/400",
      // 按钮loading
      buttonLoading: false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 用户基本信息-扩展(存放一些不重要但是必要的信息)表格数据
      appUserList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      openDetail: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        //其他页面跳转过来时携带的爱动id参数，默认为undefined
        platformId: this.$route.query.id,
        phone: undefined,
        nickName: undefined,
        cardAuth: undefined,
        videoAuth: undefined,
        vipFlag: undefined,
        status: undefined,
        onlineStatus: undefined,
        level: undefined,
        accountType: undefined,
        sex: undefined,
        branch: undefined
      },
      // 表单参数
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''

      },
      // 表单校验
      rules: {}
    };
  },
  created() {
    this.getList();
  },
  activated() {
    if(this.$route.query.id !== this.queryParams.platformId){
      this.queryParams.platformId = this.$route.query.id;
      this.getList();
    }
  },
  methods: {
    // 去排序
    toSort() {
      toSort(this.toSortBo).then(response => {
        this.getList();
        this.toSortBo = {}
        this.openSort = false
      });
    },
    // 绑定账号
    toBind() {
      bindUser(this.toBindAccountBo).then(response => {
        this.getList();
        this.toBindAccountBo = {}
        this.openBind = false
      });
    },
    // 设置账号类型
    toSetOpenAccountType() {
      setAccountType(this.setAccountTypeBo).then(response => {
        this.getList();
        this.setAccountTypeBo = {}
        this.openAccountType = false
      });
    },
    toAddVip() {
      addVip(this.addVipBo).then(response => {
        this.getList();
        this.addVipBo = {}
        this.openAddVip = false
      });
    },
    // 封号
    toBanned() {
      if(this.userBannedBo.limitType === undefined || this.userBannedBo.limitType == null) {
        this.$modal.msgError("请选择封禁时间！");
        return;
      }
      if(this.userBannedBo.reason === undefined || this.userBannedBo.reason == null || this.userBannedBo.reason === '') {
        this.$modal.msgError("封禁原因不能为空！");
        return;
      }
      bannedAccount(this.userBannedBo).then(response => {
        this.getList();
        this.userBannedBo = {}
        this.openBanned = false
      });
    },
    handleClick(tab, event) {
    },
    // 更多操作触发
    handleCommand(command, row) {
      switch (command) {
        case "kickOnline":
          this.handleKick(row)
          break;
        case "releaseAccount":
          this.releaseAccount(row)
          break;
        case "bannedAccount":
          this.userBannedBo.userId = row.id
          this.openBanned = true
          break;
        case "setAccountType":
          this.setAccountTypeBo.userId = row.id
          this.openAccountType = true
          break;
        case "bindUser":
          this.toBindAccountBo.id = row.id
          this.openBind = true
          break;
        case "addVip":
          this.addVipBo.id = row.id
          this.openAddVip = true
          break;
        case "toSort":
          this.toSortBo.id = row.id
          this.openSort = true
          break;
        case "cancelAuth":
          this.cancelBo.id = row.id
          this.openCancelRealAuth = true
          break;
        case "changePrice":
          this.changePriceBo.id = row.id
          this.changePriceBo.videoPrice = row.videoPrice
          this.changePriceBo.voicePrice = row.voicePrice
          this.openChangePrice = true
          break;
        case "changePhone":
          this.changePhoneBo.id = row.id
          this.changePhoneBo.oldPhone = row.phone
          this.changePhoneBo.platformId = row.platformId
          this.openChangePhone = true
          break;
        default:
          break;
      }
    },
    /** 解封 */
    releaseAccount(row) {
      this.$modal.confirm('是否将用户<' + row.nickName + '>解封？').then(() => {
        this.loading = true;
        return releaseAccount({
          uid: row.id
        });
      }).then(() => {
        this.loading = false;
        this.getList();
        this.$modal.msgSuccess("解封成功");
      }).catch(() => {
      }).finally(() => {
        this.loading = false;
      });
    },
    /** 踢下线 */
    handleKick(row) {
      this.$modal.confirm('是否将用户<' + row.nickName + '>踢下线？').then(() => {
        this.loading = true;
        return kickOnline(row.id);
      }).then(() => {
        this.loading = false;
        this.getList();
        this.$modal.msgSuccess("踢下线成功");
      }).catch(() => {
      }).finally(() => {
        this.loading = false;
      });
    },
    detail() {
      this.openDetail = true;
      this.title = "查看用户详情"
    },
    kickOnline(id) {

    },

    /** 查询用户基本信息-扩展(存放一些不重要但是必要的信息)列表 */
    getList() {
      this.loading = true;
      listAppUser(this.queryParams).then(response => {
        this.appUserList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },

    /** 导出按钮操作 */
    handleExport() {
      this.download('system/appUser/export', {
        ...this.queryParams
      }, `appUser_${new Date().getTime()}.xlsx`)
    },

    // 绑定账号
    toCancelRealAuth() {
      cancelRealAuth(this.cancelBo).then(response => {
        this.getList();
        this.cancelBo = {}
        this.openCancelRealAuth = false
      });
    },

    // 修改音视频价格
    toChangePrice() {
      changePrice(this.changePriceBo).then(response => {
        this.getList();
        this.changePriceBo.id = ""
        this.changePriceBo.videoPrice = ""
        this.changePriceBo.voicePrice = ""
        this.openChangePrice = false
      });
    },
    // 修改手机号码
    toChangePhone() {
      changePhone(this.changePhoneBo).then(response => {
        this.getList();
        this.changePhoneBo.id = ""
        this.changePhoneBo.oldPhone = ""
        this.changePhoneBo.platformId = ""
        this.changePhoneBo.reason = ""
        this.changePhoneBo.phone = ""
        this.openChangePhone = false
      });
    },
    changeSex(row){
      var bo = {id : row.id};
      var sex;
      if(row.sex === 1) {
        bo.sex = 0;
        sex = '男';
      } else {
        bo.sex = 1;
        sex = '女'
      }
      this.$modal.confirm('是否修改当前用户的性别为' + sex + '？').then(() => {
        this.loading = true;
        return changeSex(bo);
      }).then(() => {
        this.loading = false;
        this.getList();
        this.$modal.msgSuccess("修改成功");
      }).catch(() => {
      }).finally(() => {
        this.loading = false;
      });
    }
  }
};
</script>

<style lang="css">
.detail {
  width: 800px;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>
